<!-- 居中弹框  常用 勿删-->
<template>
	<view class="centerPopup" >
		<u-modal closeOnClickOverlay @close="centerPopupClose" :show="show" :title="title">
			<view class="slot-content">
				<text v-if="centerPopupContent">{{centerPopupContent}}</text>
				<slot v-if="!centerPopupContent"></slot>
			</view>
			<template v-slot:confirmButton>
				<view class="btnGrap">
					<button v-if="leftBtnShow" class="btn1" @click="centerPopupClose">取消</button>
					<button v-if="rightBtnShow" class="btn2" :open-type="openType" @click="centerPopupSubmit">{{rightBtnText}}</button>
				</view>
			</template>
		</u-modal>
	</view>

</template>

<script>
	export default {
		
		options: {
			styleIsolation: 'shared'
		},
		props: {
			leftBtnShow:{
				type:Boolean,
				default:true,
			},
			rightBtnShow:{
				type:Boolean,
				default:true,
			},
			rightBtnText:{
				type:String,
				default:'确定'
			},
			centerPopupContent: {
				type: String,
				default: ""
			},
			show:{
				type:Boolean,
				default:false
			},
			openType:{
				type:String,
				default:""
			},
			title:{
				type:String,
				default:'您还未登录'
			}
		},
		data(){
			return{
				
			}
		},
		methods:{
			//关闭按钮
			centerPopupClose(){
				this.$emit("update:show",false)
				this.$emit("centerPopupClose")
			},
			
			//确定按钮
			centerPopupSubmit(){
				this.$emit("centerPopupSubmit")
			}
		}

	}
</script>

<style lang="scss" scoped>
	.centerPopup {
		::v-deep .u-modal {
			.slot-content {
				width: 100%;
				display: flex;
				justify-content: center;

				>text {
					color: var(--unnamed, #141414);
					text-align: center;
					font-feature-settings: 'case' on;
					font-family: Noto Sans SC;
					font-size: 32rpx;
					font-style: normal;
					font-weight: 500;
				}
			}

			.u-modal__title {
				color: var(--unnamed, #141414);
				font-family: Noto Sans SC;
				font-size: 34rpx;
				font-style: normal;
				font-weight: 700;
				line-height: 22px;
				padding-top: 40rpx !important;
			}
			.u-modal__button-group--confirm-button{
				padding: 0px 32rpx 40rpx 32rpx !important;
			}
		}

		/* 按钮组 */
		.btnGrap {
			width: 100%;
			display: flex;
			justify-content: space-between;

			button {
				flex: 1;
				width: 278rpx;
				height: 80rpx;
				line-height: 80rpx;
			}
			.btn1 {
				margin-right: 20rpx;
				border-radius: 80rpx;
				border: 1px solid #ed3d21;
				color: #ed3d21;
			}
			
			.btn2 {
				border-radius: 80rpx;
				background: #ed3d21;
				color: #FFF;
				text-align: center;
				font-family: Noto Sans SC;
				font-size: 32rpx;
				font-style: normal;
				font-weight: 500;
			
				/* 16px */
			}
		}


	}
</style>